<template>
  <div class="editinfo">
    <el-header>
      <el-row>
        <el-col :span="24"><div class="grid-content  bg-purple-dark-heard">
          <template>
            <div class="back">
              <!-- <nav><span @click="$router.back()"><i class="el-icon-arrow-left" /></span>返回 <div data-v-fadabbee="" class="el-divider el-divider--vertical" /> <span style="font-weight: 700;">司机详情</span></nav> -->
              <el-page-header content="回单查看" @back="$router.back()" />
            </div>
          </template>
        </div></el-col>
      </el-row>
    </el-header>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark-top">
        <span>基本信息</span>
      </div></el-col>
      <el-col :span="24"><div class="grid-content bg-purple-dark">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div>
                <span style="font-size: 14px;">运输任务编号：</span>
                <input
                  v-model="fromData.transportTaskId"
                  type="text"
                >
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div>
                <span style="font-size: 14px;">车牌号码：</span>
                <input
                  v-model="fromData.licensePlate"
                  type="text"
                >
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div>
                <span style="font-size: 14px;">起始地机构：</span>
                <input
                  v-model="fromData.startAgencyName"
                  type="text"
                >
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div>
                <span style="font-size: 14px;">目的地机构：</span>
                <input
                  v-model="fromData.endAgencyName"
                  type="text"
                >
              </div>
            </div>
          </el-col>

        </el-row>
        <el-row :gutter="20" class="el-row-button">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div>
                <span style="font-size: 14px;">出车时间：</span>
                <input
                  v-model="fromData.outStorageTime"
                  type="text"
                >
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div>
                <span style="font-size: 14px;">回车时间：</span>
                <input
                  v-model="fromData.intoStorageTime"
                  type="text"
                >
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div>
                <span style="font-size: 14px;">司机：</span>
                <input
                  v-model="fromData.driverName"
                  type="text"
                >
              </div>
            </div>
          </el-col>

        </el-row>
      </div></el-col>
    </el-row>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark-top">
        <span>故障信息</span>
      </div></el-col>
      <el-col :span="24"><div class="grid-content bg-purple-dark">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <div>
                <span style="font-size: 14px;">车辆故障：</span>
                <input
                  v-model="fromData.isFault"
                  type="text"
                >
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <div>
                <span style="font-size: 14px;">是否可用：</span>
                <input
                  v-model="fromData.isAvailable"
                  type="text"
                >
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <div>
                <span style="font-size: 14px;">故障类型：</span>
                <input
                  v-model="fromData.faultType"
                  type="text"
                >
              </div>
            </div>
          </el-col>

        </el-row>
        <el-row :gutter="20" class="el-row-button">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <div style="display: flex;">
                <span style="font-size: 14px;">故障图片：</span>
                <div
                  v-if="fromData.faultImages!==null"
                  class="demo-image__preview"
                >
                  <el-image
                    style="width: 200px; vertical-align: top;"
                    :src="fromData.faultImages"
                    :preview-src-list="faultImagesList"
                  />
                </div>
                <span
                  v-else
                >无</span>
              </div>
            </div>
          </el-col>

        </el-row>
      </div></el-col>
    </el-row>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark-top">
        <span>违章信息</span>
      </div></el-col>
      <el-col :span="24"><div class="grid-content bg-purple-dark">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div>
                <span style="font-size: 14px;">车辆违章：</span>
                <input
                  v-model="fromData.isBreakRules"
                  type="text"
                >
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div>
                <span style="font-size: 14px;">违章类型：</span>
                <input
                  v-model="fromData.breakRulesType"
                  type="text"
                >
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div>
                <span style="font-size: 14px;">罚款金额：</span>
                <input
                  v-model="fromData.penaltyAmount"
                  type="text"
                >
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div>
                <span style="font-size: 14px;">扣分：</span>
                <input
                  v-model="fromData.deductPoints"
                  type="text"
                >
              </div>
            </div>
          </el-col>

        </el-row>
      </div></el-col>
    </el-row>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark-top">
        <span>事故信息</span>
      </div></el-col>
      <el-col :span="24"><div class="grid-content bg-purple-dark">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div>
                <span style="font-size: 14px;">车辆事故：</span>
                <input
                  v-model="fromData.isAccident"
                  type="text"
                >
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div>
                <span style="font-size: 14px;">事故类型：</span>
                <input
                  v-model="fromData.accidentType"
                  type="text"
                >
              </div>
            </div>
          </el-col>

        </el-row>
        <el-row :gutter="20" class="el-row-button">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div style="display: flex;">
                <span style="font-size: 14px;">事故图片：</span>
                <div
                  v-if="fromData.accidentImages!==null"
                  class="demo-image__preview"
                >
                  <el-image
                    style="width: 200px; vertical-align: top;"
                    :src="fromData.accidentImages"
                    :preview-src-list="accidentImagesList"
                  />
                </div>
                <span v-else>无</span>
              </div>
            </div></el-col>

        </el-row>
      </div></el-col>
    </el-row>
  </div>
</template>

<script>
import { getBackEditInfo } from '@/api/cart'

export default {
  name: 'EditInfo',
  components: {},
  props: [],
  data() {
    return {
      fromData: {}, // 回车登记详情数据
      accidentImagesList: [], // 点击预览事故图地址
      faultImagesList: []// 点击故障事故预览图片
    }
  },

  created() {
    // console.log(this.$route.query.id)
    this.getBackEditInfo()
  },

  methods: {
    async getBackEditInfo() {
      const id = this.$route.query.id
      const result = await getBackEditInfo(id)
      console.log(result)
      this.fromData = result
      this.accidentImagesList.push(result.accidentImages) // 赋值事故预览图
      this.faultImagesList.push(result.faultImages) // 赋值故障预览图
      // this.fromData.isFault === true ? '是' : '不是'
      if (this.fromData.isFault === true) {
        this.fromData.isFault = '是'
      } else {
        this.fromData.isFault = '不是'
      }
      if (this.fromData.isAvailable === true) {
        this.fromData.isAvailable = '是'
      } else {
        this.fromData.isFault = '不是'
      } if (this.fromData.penaltyAmount === null) {
        this.fromData.penaltyAmount = '无'
      } else {
        this.fromData.penaltyAmount
      }
      if (this.fromData.faultType === null) {
        this.fromData.faultType = '无'
      } else {
        this.fromData.faultType
      }
      if (this.fromData.isBreakRules === true) {
        this.fromData.isBreakRules = '是'
      } else {
        this.fromData.isBreakRules = '不是'
      }
      if (this.fromData.breakRulesType === null) {
        this.fromData.breakRulesType = '无'
      } else {
        this.fromData.breakRulesType
      }
      if (this.fromData.breakRulesType === null) {
        this.fromData.breakRulesType = '无'
      } else {
        this.fromData.breakRulesType
      }
      if (this.fromData.deductPoints === null) {
        this.fromData.deductPoints = '无'
      } else {
        this.fromData.deductPoints
      }
      if (this.fromData.isAccident === true) {
        this.fromData.isAccident = '是'
      } else {
        this.fromData.isAccident = '不是'
      }
      if (this.fromData.accidentType === null) {
        this.fromData.accidentType = '无'
      } else {
        this.fromData.accidentType
      }
      console.log(this.fromData.isFault)
    }
  }
}
</script>
<style lang='scss' scoped>
.editinfo{
  padding: 20px;
}
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark-heard{
    // background: #fff;
    padding: 16px 0px 24px 0;
  }
  .bg-purple-dark {
    background: #fff;
    padding: 16px 0px 24px 45px;
  }
  .bg-purple-dark-top{
    background: #f8faff;
    padding: 20px 20px 20px 40px;
  }
  .bg-purple {
    background: #fff;
    line-height: 36px;

  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .el-row-button{
    margin-top: -20px;
  }
input{
  border: none;
  font-size: 14px;
  margin-left: 5px;
  outline: none;
}
.back{
padding: 5px;
}
.el-header, .el-footer {
    background-color: #fff;
    // color: #333;
    text-align: center;
    line-height: 60px;
  }
</style>
